import { createRoot } from 'react-dom/client';
import { createElement } from "react";
import withForm from './withDrawer';

/**
 * 
 * 参数说明:
 *  formCmp: 表单组件
 *  
 *  initialValues: 内嵌表单的初始参数
 *  title: 抽屉框的标题
 *  width: 抽屉的宽度
 *  okText: 确定按钮的文本 确定, 保存等
 *  okTrigger: 确定按钮点击触发的回调函数
 *  cancelTrigger: 取消按钮点击触发的回调函数
 *  
 */
const createDrawerWithForm = (formCmp, { initialValues, title, width, okText, okTrigger, cancelTrigger }) => {
 
  // 销毁组件
  const destroyCmp = () => {
    console.log("afterColse 执行, 销毁组件");
    
    setTimeout(() => {
      root.unmount();
      container.parentNode.removeChild(container);
    }, 800)
  }
 
  // 创建DOM容器
  const container = document.createElement('div');
  document.body.appendChild(container);
  const root = createRoot(container);
  const DrawerCmp = withForm(formCmp);
  // 创建jsx组件
  const jsxCmp = createElement(DrawerCmp, {
    initialValues: initialValues,
    visible: true,
    title: title,
    width: width,
    okText: okText,
    okTrigger: okTrigger,
    cancelTrigger: cancelTrigger,
    afterClose: destroyCmp
  })
 
  // 渲染组件
  root.render(jsxCmp);
}
 
export default createDrawerWithForm;